﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SiteRequireLogin.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="TranTekBE.ProductDetails" %>
<%--<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>--%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%--<link rel="stylesheet" type="text/css" href="skins/arcticwhite/css/style.css" />--%>
<script src="Scripts/jquery.browser.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery.cleditor.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/jquery.cleditor.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <table style="width:400px">
                <tr>
                    <td style="width:300px"><h1>Product Details</h1></td>
                    <td class="tdLeftB"><button id="btnBack">Back</button></td>
                </tr>
            </table>
            <div class="msgError"><asp:Literal ID="ltError" runat="server" /></div>
            <h3><asp:Literal ID="ltProductName" runat="server" /></h3>
            <div>
                <div>
                    <ul id="tab">
                        <li><asp:LinkButton ID="lbtProductInfo" runat="server" CommandName="ProductInfo" oncommand="ControlClick_Command" Text="Product Info" /></li>
                        <li><asp:LinkButton ID="lbtPictures" runat="server" CommandName="Pictures" oncommand="ControlClick_Command" Text="Pictures" /></li>
                        <li><asp:LinkButton ID="lbtSpecifications" runat="server" CommandName="Specifications" oncommand="ControlClick_Command" Text="Specifications" /></li>
                    </ul>
                </div>
                <div class="updateSuccess"><asp:Literal ID="ltUpdateSuccess" runat="server" /></div>
                <div>
                    <asp:MultiView ID="mvProduct" runat="server">
                        <asp:View ID="vProductInfo" runat="server">
                            <table style="width:60%">
                                <tr>
                                    <td colspan="2" class="msgError"><asp:Literal ID="ltProductInfoError" runat="server" />&nbsp;</td>
                                </tr>
                                <tr id="name">
                                    <td class="tdRightM" style="width:20%">Product Name:<br /><asp:Literal ID="ltProductNameErr" runat="server" /></td>
                                    <td class="tdLeftM" style="width:80%"><asp:TextBox ID="txtProductName" runat="server" Width="300px" MaxLength="100" /> <span class="msgError">*</span></td>
                                </tr>
                                <tr>
                                    <td class="tdRightM">Active:</td>
                                    <td class="tdLeftM">
                                        <asp:RadioButtonList ID="rblStatus" runat="server" RepeatDirection="Horizontal">
                                            <asp:ListItem Text="Yes" Value="1" Selected="True" />
                                            <asp:ListItem Text="No" Value="0" />
                                        </asp:RadioButtonList>
                                    </td>
                                </tr>
                                <tr id="price">
                                    <td class="tdRightM">Price:<br /><asp:Literal ID="ltPriceErr" runat="server" /></td>
                                    <td class="tdLeftM"><asp:TextBox ID="txtPrice" runat="server" Width="100px" MaxLength="10" /> <span class="msgError">*</span></td>
                                </tr>
                                <tr id="onhand">
                                    <td class="tdRightM">Onhand Qty:<br /><asp:Literal ID="ltOnhandQtyErr" runat="server" /></td>
                                    <td class="tdLeftM"><asp:TextBox ID="txtOnhandQty" runat="server" Width="100px" MaxLength="10" /> <span class="msgError">*</span></td>
                                </tr>
                                <tr>
                                    <td class="tdRightT">Category:</td>
                                    <td class="tdLeftM">
                                        <table style="width:100%">
                                            <tr>
                                                <td class="tdCenterM" style="width:45%"><asp:ListBox runat="server" ID="lbCategoryLeft" SelectionMode="Multiple" Width="99%" Height="150px" /></td>
                                                <td class="tdCenterM" style="width:10%">
                                                    <asp:Button ID="btnMoveRight" runat="server" Text=">" Width="50px" CommandName="MoveRight" oncommand="ControlClick_Command" onclientclick="return CheckSelectItem('lbCategoryLeft');" /><br />
                                                    <asp:Button ID="btnMoveLeft" runat="server" Text="<" Width="50px" CommandName="MoveLeft" oncommand="ControlClick_Command" onclientclick="return CheckSelectItem('lbCategoryRight');" /><br />
                                                    <asp:Button ID="btnMoveAllRight" runat="server" Text=">>" Width="50px" CommandName="MoveAllRight" oncommand="ControlClick_Command" /><br />
                                                    <asp:Button ID="btnMoveAllLeft" runat="server" Text="<<" Width="50px" CommandName="MoveAllLeft" oncommand="ControlClick_Command" />
                                                </td>
                                                <td class="tdCenterM" style="width:45%"><asp:ListBox runat="server" ID="lbCategoryRight" SelectionMode="Multiple" Width="99%" Height="150px" /></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdRightT">Comments:</td>
                                    <td class="tdLeftM"><asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Height="70px" Width="300px" MaxLength="256" /></td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td class="tdLeftM"><asp:Button ID="btnSubmit" Text="Save" runat="server" CommandName="SaveProductInfo" Width="70px" oncommand="ControlClick_Command" /></td>
                                </tr>
                            </table>
                        </asp:View>
                        <asp:View ID="vPictures" runat="server">
                            <div class="msgError"><asp:Literal ID="ltPicturesError" runat="server" />&nbsp;</div>
                            <div class="listProductImage" id="divListProductImage">
                                <ul>
                                    <asp:Repeater ID="rpImages" runat="server">
                                        <ItemTemplate>
                                            <li id="pic<%#Eval("PictureISN")%>"><img src="<%# GetImageUrl(Eval("ProductISN"), Eval("FileName")) %>" alt="" <%# GetAvartarCss(Eval("isAvatar")) %> /></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <input type="hidden" value="" id="lstImages" runat="server" />
                            <input type="hidden" value="" id="SelectForAvatar" runat="server" />
                            <div>
                                <asp:Button ID="btnDelete" runat="server" Text="Delete" Width="70px" onclientclick="return DeleteImageConfirm();" CommandName="DeleteImages" oncommand="ControlClick_Command" />
                                <asp:Button ID="btnSetAvatar" runat="server" Text="Set as Avatar" Width="100px" CommandName="SetAvatar" oncommand="ControlClick_Command" />
                                <button id="btnAdd" type="button" style="width:70px">Add</button>
                            </div>
                        </asp:View>
                        <asp:View ID="vSpecifications" runat="server">
                            <div class="msgError"><asp:Literal ID="ltSpecificationError" runat="server" />&nbsp;</div>
                            <%--<ComponentArt:Editor ID="Editor1" runat="server" EditEngine="Browser" 
                                    SkinFolderLocation="skins/arcticwhite" SourceCssClass="SourceCssClass" 
                                    DesignCssClass="DesignCssClass" HighlightElementCssClass="HighlightCssClass" 
                                    CssFileURL="skins/arcticwhite/css/iframe.css" Width="730" Height="350" 
                                    TemplateFile="1ToolBar.ascx" 
                                    BreadcrumbClientTemplateId="breadcrumbTemplate"
                                    BreadcrumbCssClass="f-l" 
                                    BreadcrumbSeparator="<div class='sep'></div>" onsave="Editor1_Save"
                                    >
                                <ClientTemplates>
                                    <ComponentArt:ClientTemplate Id="breadcrumbTemplate">
                                        <a onclick="this.blur();return false;" href="javascript:void(0);" class="btn"><span>&lt;##DataItem.breadcrumb##&gt;</span></a>
                                    </ComponentArt:ClientTemplate>
                                </ClientTemplates>
                                <Styles>
                                  <ComponentArt:EditorStyle Name="Normal" StyleString="font-weight:400;font-style:normal;font-size:12px;font-family:Arial;" />
                                  <ComponentArt:EditorStyle Name="Heading 1" Element="H1" ReplaceParagraphTag="true" DropDownStyleString="font-family:'Arial Black',Arial;font-size:20px;color:#333;font-weight:700;" />
                                  <ComponentArt:EditorStyle Name="Heading 2" Element="H2" ReplaceParagraphTag="true" DropDownStyleString="font-family:Arial;font-size:17px;color:#3c7e9d;font-weight:700;" />
                                  <ComponentArt:EditorStyle Name="Heading 3" Element="H3" ReplaceParagraphTag="true" DropDownStyleString="font-family:Arial;font-size:12px;color:#999;" />
                                  <ComponentArt:EditorStyle Name="Bold" StyleString="font-weight:700;" DropDownStyleString="font-weight:700;" />
                                  <ComponentArt:EditorStyle Name="Italic" StyleString="font-style:italic;" DropDownStyleString="font-style:italic;" />
                                  <ComponentArt:EditorStyle Name="Bold + Italic" StyleString="font-weight:700;font-style:italic;" DropDownStyleString="font-weight:700;font-style:italic;" />
                                </Styles>
                                <ToolBars>
                                    <ComponentArt:ToolBar
                                            ID="FormattingToolBar"
                                            RunAt="server"
                                            ImagesBaseUrl="skins/arcticwhite/images"
                                            CssClass="toolbar"
                                            Width="100"
                                            Height="25"
                                            DefaultItemImageWidth="25"
                                            DefaultItemImageHeight="25"
                                            UseFadeEffect="false"
                                            SiteMapXmlFile="CoreToolBar.xml"
                                            >
                                        <ClientEvents>
                                            <ItemMouseUp EventHandler="font_toolbar_mouseup" />
                                        </ClientEvents>
                                    </ComponentArt:ToolBar>
                                </ToolBars>
                            </ComponentArt:Editor>--%>
                            <asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine"></asp:TextBox>
                            <asp:Button ID="btnSaceSpecification" Text="Save" Width="70px" CommandName="SaveSpecification" oncommand="ControlClick_Command" runat="server" />
                            <%--<input type="button" style="width:70px" value="Save" onclick="Editor1.save()" />--%>
                        </asp:View>
                    </asp:MultiView>
                </div>
            </div>
            <script type="text/javascript">
                function LoadJS() {
                    $("input[id*='txtProductName'],input[id*='txtPrice'],input[id*='txtOnhandQty']").on("focus", function() {
                        $(this).parent().parent().find('.msgErrorSmall').hide();
                    });
                    $("#btnBack").on("click", function(e) {
                        e.preventDefault();
                        location.href = "ProductMgmt.aspx";
                    });
                    $("li[id^='pic']").on("click", function(e) {
                        /*
                        var id = $(this).prop("id");
                        if ($('#' + id).hasClass('imgSelected') == true) {
                            $('#' + id).removeClass("imgSelected");
                        }
                        else {
                            $('#' + id).addClass("imgSelected");
                        }
                        */
                        var cssSelected = 'selected';
                        if ($('img', this).hasClass(cssSelected) == true){
                            $('img', this).removeClass(cssSelected);
                        }
                        else{
                            $('img', this).addClass(cssSelected);
                        }
                        checkButtonStatus();
                    });
                    checkButtonStatus();
                    $("button[id='btnAdd']").on("click", function(e) {
                        e.preventDefault();
                        OpenDialog("Upload Pictures", "UploadPictures.aspx?isn=<%=this.ProductISN%>", 500, 700);
                    });
                    $("textarea[id$='txtEditor']").cleditor({width:700,height:400});
                }
                function CheckSelectItem(id) {
                    if ($("select[id*='" + id + "']").val() != null)
                        return true;
                    else {

                        alert("Please select item(s).");
                        return false;
                    }
                }
                function DeleteImageConfirm() {
                    //var id = '#divListProductImage > ul > li.imgSelected';
                    var id = '#divListProductImage > ul > li > img.selected';
                    if ($(id).length > 0){
                        if (confirm("Are you sure to delete?") == true){                            
                            return true
                        }
                        return false;
                    }
                    return false;
                }
                /*
                function checkDeleteButtonStatus() {
                    var itemSelected = $('#divListProductImage > ul > li.imgSelected').length;
                    var buttonId = 'input[id$="btnDelete"]';
                    $(buttonId).attr('disabled', true);
                    if (itemSelected > 0) {
                        $(buttonId).attr('disabled', false);
                        $("input[id$='lstImages']").val($('#divListProductImage > ul > li.imgSelected').map(function() { return $(this).prop("id").replace("pic", ""); }).get().join(","));
                    }
                }
                function checkSetAvatarButtonStatus() {
                    var itemSelected = $('#divListProductImage > ul > li.imgSelected').length;
                    var buttonId = 'input[id$="btnSetAvatar"]';
                    $(buttonId).attr('disabled', true);
                    if (itemSelected == 1) {
                        $(buttonId).attr('disabled', false);

                        $("input[id$='SelectForAvatar']").val($('#divListProductImage > ul > li.imgSelected').prop("id").replace("pic", ""));
                    }
                    else {
                        $("input[id$='SelectForAvatar']").val('');
                    }
                }
                */
                function checkButtonStatus() {
                    //var liSelectedID = '#divListProductImage > ul > li.imgSelected';
                    var liSelectedID = '#divListProductImage > ul > li > img.selected';
                    var buttonDeleteId = 'input[id$="btnDelete"]';                    
                    var itemSelected = $(liSelectedID).length;
                    //delete button
                    $(buttonDeleteId).attr('disabled', true);
                    if (itemSelected > 0) {
                        $(buttonDeleteId).attr('disabled', false);
                        $("input[id$='lstImages']").val($(liSelectedID).map(function() { return $(this).parent().prop("id").replace("pic", ""); }).get().join(","));                    
                    }
                    //set avatar button
                    var buttonSetAvatarId = 'input[id$="btnSetAvatar"]';
                    $(buttonSetAvatarId).attr('disabled', true);
                    $("input[id$='SelectForAvatar']").val('');
                    if (itemSelected == 1) {
                        $(buttonSetAvatarId).attr('disabled', false);
                        $("input[id$='SelectForAvatar']").val($(liSelectedID).parent().prop("id").replace("pic", ""));
                    }
                }
                function reloadPage(index, isn) {
                    location.href = "ProductDetails.aspx?isn=" + isn + "&idx=" + index;
                }
            </script>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>